<?php
defined('_JEXEC') or die('Restricted access');
$app = JFactory::getApplication();
$input = $app->input;
$itemid = $input->get('Itemid');

$item  = $input->getArray();
$this->activeUsers = json_decode($item['jsonData']);
$vName = $input->get('view');
?>
<div class="res-title-rg pos_pre">
    <span class="fl pos-icon text-c"><i class="acquisition"></i></span>
    <div class="title-info">
        <h2 class="fontsize20">User Flow</h2>
        <p><a href="#">Home</a>&nbsp;/&nbsp;<a href="#">Acquisition</a>&nbsp;/&nbsp;User Flow</p>
    </div>
</div>
<div class="ws-content pdall15">
<!-- <div class="camtab">
    <nav>
      <ul class="pagination navmg ">
        <li><a href="#">Copy</a></li>
        <li><a href="#">Excel</a></li>
        <li><a href="#">CSV</a></li>
        <li><a href="#">PDF</a></li>
      </ul>
    </nav>
</div> -->
<?php if ($this->activeUsers->nodes): ?>
    <div id="main" style="height:520px;"></div>
<?php else: ?>
 	<p class="ws-tips">No report data found.</p>
<?php endif; ?>
</div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
	myChart.showLoading();
	var data = {
		"nodes": <?php echo json_encode($this->activeUsers->nodes); ?>,
		"links": <?php echo json_encode($this->activeUsers->links); ?>
	};
    myChart.hideLoading();

    myChart.setOption(option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        toolbox: {
	        right: "10%",
            feature: {
                saveAsImage: {}
            }
        },
        series: [
            {
                type: 'sankey',
                layout: 'none',
                data: data.nodes,
                links: data.links,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: '#aaa'
                    }
                },
                lineStyle: {
                    normal: {
                        curveness: 0.5
                    }
                }
            }
        ]
    });
</script>
